<template>
  <div class="tabble" v-if="
    $route.path == '/' ||
    $route.path =='/cart' ||
    $route.path =='/recipe' ||
    $route.path =='/user'
    ">
    <!-- tabBar -->
    <van-tabbar router v-model="active" active-color="#5ba0f4" placeholder>
      <van-tabbar-item v-for="(item,index) in tabbars" :key="index"  :to="item.path">
        <span>{{ item.title }}</span>
        <van-icon slot="icon" slot-scope="props" :name="props.active?item.active:item.nomal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
  watch: {
    $route (to) {
      this.tabbarActive(to.path)
    }
  },
  data () {
    return {
      active: 0,
      tabbars: [
        {
          path: '/',
          title: '首页',
          nomal: 'wap-home-o',
          active: 'wap-home'
        },
        {
          path: '/cart',
          title: '购物车',
          nomal: 'shopping-cart-o',
          active: 'shopping-cart'
        },
        {
          path: '/recipe',
          title: '食谱',
          nomal: 'notes-o',
          active: 'column'
        },
        {
          path: '/user',
          title: '我的',
          nomal: 'user-o',
          active: 'manager'
        }
      ]
    }
  },
  methods: {
    tabbarActive (path) {
      const index = this.tabbars.map(item => item.path).indexOf(path)
      if (index !== -1) {
        this.active = index
      }
    }
  }
}
</script>

<style lang="less" scope="scoped">
.van-tabbar{
  box-shadow: 0 0 1px #666;
}
</style>
